<template>
    <div class="categoryContainer">
        <!-- myheader -->
        <my-header :title="title"></my-header>
        <!-- search -->
        <my-search @click.native="toSearch"></my-search>
        <!-- categoryList -->
        <category-first></category-first>
        <!-- myfooter -->
        <my-footer :page="page"></my-footer>
    </div>
</template>

<script>
import mySearch from 'Components/common/mySearch'
import myHeader from 'Components/common/myHeader'
import myFooter from 'Components/common/myFooter'
import categoryFirst from './CategoryFirst'
export default {
    data() {
        return {
            page: 1,
            title: '全部分类'
        }
    },
    methods: {
        toSearch() {
            this.$router.push({path: '/search'})
        }
    },
    components: {
        categoryFirst,
        myHeader,
        myFooter,
        mySearch
    }
}
</script>

<style lang="scss" scoped>
    .categoryContainer {
        flex: 1;
        display: flex;
        flex-direction: column;
        // padding-top: 46px;
        height: 100%;
        font-size: 0.15rem;
        .categoryList {
            display: flex;
            flex: 1;
            overflow: hidden;
            margin-bottom: 50px;
        }
    }
</style>
